<template>
  <view class="pending-pay-order">
  	<custom-nav-bar showBack title="待付款"></custom-nav-bar>
  	<view class="pending-pay-order-list">
  		<view class="order" v-for="item of data.records" :key="item.id">
  			<order-item :item="item"></order-item>
  		</view>
  	</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import catchRandom from '../../utils/catchRandom';





const random = ref(catchRandom(1,30))
console.log(random.value);
const data = 
	{
	total:random.value,
	records:Array.from({ length: random.value }, (e, i) => {

			return {
			id:`abcdefg${i}`,
			number:`123456${i}`,
			
			// 0：待付款，1，待接单，2：已结单，3：已完成，4：已取消
			status:0,
			userId:`abc`,
			orderTime:`2025-3-${random.value-i} 20:00`,
			
			// 0：未付款，1：已付款
			payStatus:0,
			amount:(i%2)*33+(i%3+1)*66,
			phone:`10086${i}`,
			address:`12栋`,
			packAmount:`5`,
			orderDetailList:Array.from({length: catchRandom(1,8)},(ele,j)=>{
				
				return {
					id:`ssbb${i}${j}`,
					name:(i*j)%2?'混沌炒饺子':'饺子炒混沌',
					orderId:`aaaaaaaaaa${i}${j}`,
					dishId:`0000000${i}${j}`,
					dishFlavor:(i*j)%2?'变态辣':'非常甜',
					number:(i*j)%2,
					amount:(i%2)*33+(j%3)*66,
					image:`/static/images/food${(j*i)%2+1}.jpg`
				}
			})
		}
		})
}


</script>
<style scoped lang="scss">
	.pending-pay-order {
		min-height: 100vh;
		background-color: #f2f2f2;
		padding: 30rpx;
		box-sizing: border-box;
	
		.pending-pay-order-list {
			display: flex;
			flex-direction: column;
			gap: 30rpx;
		}
	}
</style>
<style></style>
